<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>无标题文档</title>
  <style>
    #div1 div, #div2 div {
      width: 200px;
      height: 200px;
      border: 1px #000 solid;
      display: none;
    }

    .active {
      background: red;
    }
  </style>
  <!--<script>-->
  <!--window.onload = function () {-->
  <!--var t1 = new Tab()-->
  <!--t1.init()-->
  <!--}-->

  <!--function Tab() {-->
  <!--this.oParent = document.getElementById('div1');-->
  <!--this.aInput = this.oParent.getElementsByTagName('input');-->
  <!--this.aDiv = this.oParent.getElementsByTagName('div');-->
  <!--}-->

  <!--Tab.prototype.init = function () {-->
  <!--let This = this;-->
  <!--for (var i = 0; i < this.aInput.length; i++) {-->
  <!--this.aInput[i].index = i;-->
  <!--this.aInput[i].onclick = function () {-->
  <!--This.change(this);-->
  <!--};-->
  <!--}-->
  <!--};-->

  <!--Tab.prototype.change = function (obj) {-->
  <!--for (var i = 0; i < this.aInput.length; i++) {-->
  <!--this.aInput[i].className = '';-->
  <!--this.aDiv[i].style.display = 'none';-->
  <!--}-->
  <!--obj.className = 'active';-->
  <!--this.aDiv[obj.index].style.display = 'block';-->
  <!--}-->
  <!--</script>-->
</head>

<body>
<div id="div1">
  <input class="active" type="button" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
  <div style="display:block">11111</div>
  <div>22222</div>
  <div>33333</div>
</div>

<div id="div2">
  <input class="active" type="button" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
  <div style="display:block">11111</div>
  <div>22222</div>
  <div>33333</div>
</div>

<script>

  var obj = {
    oParent: '',
    aInput: '',
    aDiv: '',
    init: function (id) {
      this.oParent = document.getElementById(id);
      this.aInput = this.oParent.getElementsByTagName('input');
      this.aDiv = this.oParent.getElementsByTagName('div');
      this.click()
    },
    click: function () {
      var that = this;
      for (let i = 0; i < this.aInput.length; i++) {
        this.aInput[i].index = i;
        this.aInput[i].onclick = function () {
          that.change(this)
        };
      }
    },
    change(obj) {
      for (var i = 0; i < this.aInput.length; i++) {
        this.aInput[i].className = '';
        this.aDiv[i].style.display = 'none';
      }
      obj.className = 'active';
      this.aDiv[obj.index].style.display = 'block';
    }
  };

  obj.init('div1');
</script>
</body>
</html>
